<template>
  <div class="all-cl container">
    <div class="all-flex-center-between top">
      <div style="border-color:#9966FF">
        <span>今日支付订单数</span>
        <i style="color:#9966FF">{{countInfo.today_pay_count}}</i>
      </div>
      <div style="border-color:#00CC66">
        <span>今日成交总额</span>
        <i style="color:#00CC66">{{countInfo.today_pay_money}}</i>
      </div>
      <div style="border-color:#CC33FF">
        <span>本月支付订单数</span>
        <i style="color:#CC33FF">{{countInfo.month_pay_count}}</i>
      </div>
      <div style="border-color:#FFCC00">
        <span>本月支付总额</span>
        <i style="color:#FFCC00">{{countInfo.month_pay_money}}</i>
      </div>
      <div style="border-color:#FF6666">
        <span>总支付订单数</span>
        <i style="color:#FF6666">{{countInfo.all_pay_count}}</i>
      </div>
      <div style="border-color:#33CCFF">
        <span>总支付总额</span>
        <i style="color:#33CCFF">{{countInfo.all_pay_money}}</i>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import Echarts from "echarts";

export default {
  data() {
    return {
      countInfo: {}
    };
  },
  created() {
    let _this = this;
    this.$ajax({
      url: 'index/index',
      perfect(con) {
        _this.countInfo = con;
      }
    });
    this.$ajax({
      url: 'index/statistics',
      perfect(con) {
        const bottomChart = Echarts.init(document.querySelector(".bottom"));
        _this.$nextTick(() => {
          const option = {
            title: {
              text: '数据统计折线图'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data:['成交订单','成交总额', '每日新增用户']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: con.result_date
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name:'成交订单',
                type:'line',
                data: con.result_count
              },
              {
                name:'成交总额',
                type:'line',
                data: con.result_money
              },
              {
                name:'每日新增用户',
                type:'line',
                data: con.result_user_count
              }
            ]
          };
          bottomChart.setOption(option);
        });
      }
    });
  }
};
</script>
<style scoped>
.top {
  padding: 0 100px;
  margin: 50px 0 100px; 
}
.top > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 30px 0;
  border: 1px solid #666;
  border-radius: 50%;
}
.top span {
  display: block;
  width: 100%;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.top i {
  display: block;
  width: 100%;
  font-size: 25px;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
}
.bottom {
  height: 500px;
  margin: 0 100px 100px;
}
</style>
